<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>菜单</title>
  </head>

  <body>
    <div class="menu">
      <div class="list">
        {{each menu as item index}}
        <div class="one">
          <div class="title">{{index}}</div>
          <div class="command">
            {{each menu[index] as item2}}
            <div class="m">
              <span
                class="help-icon"
                style="background-position:{{((item2.icon - 1) % 10) * -50}}px {{(floor((item2.icon - 1) / 10) - 3) * -50}}px"
              ></span>
              <div class="m-t">{{item2.reg}}</div>
              <div class="m-b">{{item2.desc}}</div>
            </div>
            {{/each}}
          </div>
        </div>
        {{/each}}
      </div>
      <div class="copyright">alemon-bot &#38;&#38; alemon-plugin-kong</div>
    </div>

    <style>
      body {
        width: 600px;
        margin: 0;
      }
      @font-face {
        font-family: 'sy';
        src: url('{{path}}/font/SourceHanSansCN-Normal.ttf');
      }
      .menu {
        font-family: 'sy';
        width: 600px;
        position: relative;
        min-height: 300px;
        background: url('{{path}}/菜单/bg.png');
        background-size: 100% auto;
      }
      .list {
        padding: 100px 0 30px;
        background: url('{{path}}/菜单/main.png');
        background-size: 100% auto;
        background-repeat: no-repeat;
      }
      .one {
        width: 80%;
        margin: 30px auto;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.5);
      }

      .title {
        padding: 10px;
        font-weight: bold;
      }
      .command {
        display: flex;
        flex-wrap: wrap;
        background: rgba(255, 255, 255, 0.6);
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        overflow: hidden;
      }

      .m {
        width: calc((100% / 2) - (1px * 2));
        padding: 10px 0;
        position: relative;
        border-right: rgba(255, 255, 255, 0.5) 1px solid;
        border-bottom: rgba(255, 255, 255, 0.5) 1px solid;
      }
      .m:nth-of-type(2n) {
        border-right: none;
      }

      .m-t {
        margin-left: 40px;
        padding: 0 10px;
        font-weight: 600;
      }
      .m-b {
        margin-left: 40px;
        padding: 0 10px;
        font-size: 14px;
      }
      .copyright {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;

        font-size: 16px;

        text-shadow: 1px 1px 1px #000;
      }

      .help-icon {
        width: 40px;
        height: 40px;
        display: block;
        position: absolute;
        border-radius: 5px;
        left: 6px;
        top: 12px;
        transform: scale(0.85);
        background: url('{{path}}/菜单/icon.png') 0 0 no-repeat;
        background-size: 500px auto;
      }
    </style>
  </body>
</html>
